{extend name="default/template/base_index" /}

{block name="area_header"}
	<link rel="stylesheet" type="text/css" media="all" href="__CSS__/wxshop.css">
	<link rel="stylesheet" type="text/css" media="all" href="__CDN__/jquery-datetimepicker/jquery.datetimepicker.css">
	<script type="text/javascript" src="__CDN__/jquery-datetimepicker/jquery.datetimepicker.js"></script>
	<link type="text/css" rel="stylesheet" src="__CDN__/jquery-uploadify/3.2.1/uploadify.css" />
	<script type="text/javascript" src="__CDN__/jquery-uploadify/3.2.1/jquery.uploadify.min.js"></script>
	<style type="text/css">
		.main-c{
			width:900px;
			margin: 50px auto;
		}
		.main-pic .img-preview img{
			width: 300px;
			height: 85px;
		}
		.sp-img{
			width: 60px;
			height: 60px;
		}
		.main-c label{
			padding: 0 20px;
		}
		.main-c input{
			width: 100%;
			padding: 5px;
		}
		.page-show{
			text-align: center;
		}
		.sp-list img{
			width: 60px;
			height: 60px;
		}
		.empty-tr{
			padding: 20px 0;
		}
	</style>
{/block}

{block name="area_body"}
	{include file="default/Widget/topbar" /}
	<div class="admin-main container-fluid">
		{include file="default/Widget/left" /}
		<div class="admin-main-content">
			{include file="default/Widget/breadcrumb" /}

			<div class="col-main">
				<div class="main-hd">
					<h2>套餐详情</h2>
				</div>
				<div class="main-bd clearfix" style="padding: 0 10px;margin-top: 0px;">
					<div class="main-c">
						<input type="hidden" name="package_id" value="{$package_info.package_id|default=0}">
						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label class="control-label col-lg-2 col-md-2">套餐主图:</label>
							<div class="main-pic col-lg-10 col-md-10">
								<!-- 图片选择DOM结构 -->
								<div class="wxuploaderimg main_img clearfix <notempty name="package_info.package_img">checked{/notempty}"  data-maxitems="1">
								<div class="img-preview clearfix" >
									<notempty name="package_info.package_img">
										<div class="pull-left clearfix img-item">
											<img src="{:getImgUrl($package_info['package_img'],400)}" data-imageid="{$package_info.package_img}"/>
											<div class="edit_pic_wrp"><a href="javascript:;" class="fa fa-lg fa-trash js_delete"></a></div>
										</div>
									{/notempty}
								</div>
								<div class="add">
									<i class="fa fa-plus"></i>
								</div>
							</div>

							<!-- 图片选择DOM结构 -->
						</div>
						</div>
						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label class="control-label col-lg-2 col-md-2">套餐名称:</label>
							<div class="col-lg-10 col-md-10">
								<input id="package_name" type="text" class="form-control input-short input-sm" value="{$package_info.package_name}" maxlength="60">
							</div>
						</div>
						<notempty name="package_info.create_time">
							<div class="form-group col-lg-12 col-md-12 clearfix">
								<label class="control-label col-lg-2 col-md-2">创建时间:</label>
								<div class="col-lg-10 col-md-10">
									<span>{$package_info.create_time|date="Y-m-d H:i:s",###}</span>
								</div>
							</div>
						{/notempty}
						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label class="control-label col-lg-2 col-md-2">结束时间:</label>
							<div class="col-lg-10 col-md-10">
								<notempty name="package_info.end_time">
									<input id="end_time" type="text" class="form-control input-normal input-sm enddatetime" value="{$package_info.end_time|date='Y-m-d H:i:s',###}"/>
									{else/}
									<input id="end_time" type="text" class="form-control input-normal input-sm enddatetime" value="{:date('Y-m-d H:i:s')}"/>
								{/notempty}
							</div>
						</div>
						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label class="control-label col-lg-2 col-md-2">套餐价格:</label>
							<div class="col-lg-10 col-md-10">
								<input id="package_price" type="number" class="form-control input-short input-sm" value="{$package_info.package_price|default='0'}">
							</div>
						</div>
						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label class="control-label col-lg-2 col-md-2">套餐描述:</label>
							<div class="col-lg-10 col-md-10">
								<textarea id="package_desc" class="form-control">{$package_info.package_desc}</textarea>
							</div>
						</div>
						<div class="form-group col-lg-12 col-md-12 clearfix">
							<label class="control-label col-lg-2 col-md-2">套餐类型:</label>
							<div class="col-lg-10 col-md-10">
								<select id="package_type" class="form-control input-sm input-short">
									<option value="0" <eq name="package_info.dt_type" value="0">selected="selected"</eq>>默认套餐</option>
									<option value="1" <eq name="package_info.dt_type" value="1">selected="selected"</eq>>搭配购套餐</option>
								</select>
							</div>
						</div>
						<div class="item-list col-lg-12 col-md-12">
							<div class="oper col-lg-12 col-md-12">
								<h4>套餐中商品:</h4>
								<a class="btn btn-primary btn-sm add-sp" href="javascript:void(0);"><i class="fa fa-plus"></i>添加商品</a>
							</div>
							<table class="table table-striped table table-hover  table-condensed" id="package_items">
								<thead>
								<tr>
									<th>
										商品ID
									</th>
									<th>
										商品主图
									</th>
									<th style="width: 320px">
										商品名称
									</th>
									<th>
										商品规格
									</th>
									<th>
										是否主商品
									</th>
									<th>
										操作
									</th>
								</tr>
								</thead>
								<tbody>
								<empty name="package_info.items">
									<tr>
										<td colspan="7" class="text-center">套餐中无任何商品</td>
									</tr>
									{else/}
									<volist name="package_info.items" id="vo">
										<tr data-pid={$vo.p_id} data-sku_id="{$vo.sku_id}">
											<td>{$vo.p_id}</td>
											<td><img class="sp-img" src="{:getImgUrl($vo['img_id'])}&size=60"></td>
											<td>{$vo.product_name}</td>
											<td>
												<a class="btn btn-primary btn-sm edit-item-sku" href="javascript:void(0);"><i class="fa fa-edit"></i>编辑</a>
												<span class="sku-desc">
													<if condition="$vo.sku_id eq 0">
														*包含全部规格*
														{else/}
														{$vo.sku_desc}
													</if>
												</span>
											</td>
											<td>
												<select class="form-control input-sm input-short">
													<option value="0" <eq name="vo.is_main" value="0">selected="selected"</eq>>否</option>
													<option value="1" <eq name="vo.is_main" value="1">selected="selected"</eq>>是</option>
												</select>
											</td>
											<td>
												<a class="btn btn-danger btn-sm delete-item"><i class="fa fa-trash-o"></i>{:L('BTN_DELETE')}</a>
											</td>
										</tr>

									{/volist}
								{/empty}
								</tbody>
							</table>
						</div>
					</div>
					<div class="form-group col-lg-12 col-md-12 clearfix tool-bar text-center border">
						<a href="javascript:void(0);" id="save_package" class="btn btn-primary btn-sm"><i class="fa fa-check"></i>{:L('BTN_SAVE')}</a>
						<a href="{:url('productPackage/index')}" class="btn btn-default btn-sm"><i class="fa fa-reply"></i>返回</a>
					</div>
					<div class="modal fade" id="select_product" style="margin-top: 150px;">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h4 class="modal-title">选择商品</h4>
								</div>
								<div class="modal-body row" style="font-size: 13px">
									<!--<div class="col-sm-12 form-group">-->
									<!--<label class="control-label col-lg-2 col-md-2">查找类目:</label>-->
									<!--<select class="form-control input-short input-sm" style="float: left;">-->
									<!--<option>1234</option>-->
									<!--</select>-->
									<!--<a class="btn btn-default btn-sm" id="search_cate" href="javascript:void(0);"><i class="fa fa-search"></i>查找</a>-->
									<!--</div>-->
									<div class="col-sm-12 form-group">
										<label class="control-label col-lg-2 col-md-2">查找名称:</label>
										<input name="product_name" class="form-control input-short input-sm" style="float: left;" placeholder="输入商品名称查找">
										<a class="btn btn-default btn-sm" id="search_name" href="javascript:void(0);"><i class="fa fa-search"></i>查找</a>
									</div>
									<div class="col-sm-12" style="height:400px; overflow-y: scroll; ">
										<h4>商品列表:</h4>
										<div id="sp_list" class="sp-list">
											<input type="hidden" name="page" value="1">
											<input type="hidden" name="count" value="0">
											<table width="100%">
												<thead>
												<tr>
													<th>PID</th>
													<th>主图</th>
													<th>商品名称</th>
												</tr>
												</thead>
												<tbody></tbody>
											</table>
										</div>
									</div>
									<div class="col-sm-12">
										<div class="page-show">
											<a class="pre" href="javascript:void(0);">上一页</a>
											<a class="next" href="javascript:void(0);">下一页</a>
										</div>
									</div>
								</div>
								<div class="modal-footer row">
									<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
									<button id="add_product" type="button" class="btn btn-primary">添加</button>
								</div>
							</div>
						</div>
					</div>

					<div class="modal fade" id="select_sku" tabindex="-1" role="dialog" style="margin-top: 150px;">
						<div class="modal-dialog">
							<div class="modal-content">
								<div class="modal-header">
									<button type="button" class="close" data-dismiss="modal" aria-label="Close">
										<span aria-hidden="true">&times;</span>
									</button>
									<h4 class="modal-title">选择规格</h4>
								</div>
								<div class="modal-body row" style="font-size: 13px">
									<div class="col-sm-12" style="height:50px; overflow-y: scroll; ">
										<label for="sku_selector" class="control-label col-lg-2 col-md-2">规格列表:</label>
										<div class="col-lg-10 col-md-10">
											<select id="sku_selector" class="form-control input-sm input-short">
												<option value="0">全部规格</option>
											</select>
										</div>
									</div>
								</div>
								<div class="modal-footer row">
									<button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
									<button id="select_sku_over" type="button" class="btn btn-primary">确定</button>
								</div>
							</div>
						</div>
				</div>
			</div>
			{include file="default/template/wxpicture" /}
		</div>
	<!-- END admin-main-content -->
	</div>
	<!-- END admin-main-->
{/block}

{block name="area_footer"}
	<script type="text/javascript">
		$('.startdatetime').datetimepicker({
			lang: 'ch',
			format:'Y-m-d H:i:s',
			// timepicker:false,
		});
		$('.enddatetime').datetimepicker({
			lang: 'ch',
			format:'Y-m-d H:i:s',
			// timepicker:false,
		});
		//图片上传
		wxuploadimg.init({cont:".wxuploaderimg"});
	</script>
	<script type="text/javascript">
		var item_list = [];
		function msgAlert(msg,cannot_close){

			$ele = $('#alert_modal');

			if($ele.length == 0){

				if(!cannot_close){
					$alert = $('<div id="alert_modal" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="margin-top: 250px"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title" id="myModalLabel">提示</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">确定</button> </div> </div> </div> </div>');

				}else{
					$alert= $('<div id="alert_modal" class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"><div class="modal-dialog" role="document" style="margin-top: 250px"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"></button> <h4 class="modal-title" id="myModalLabel">提示</h4> </div> <div class="modal-body"> </div> <div class="modal-footer"> </div> </div> </div> </div>');

				}

				$("body").append($alert);

				if(msg){
					$alert.find(".modal-body").text(msg);
				}

				$alert.on('hidden.bs.modal', function (e) {
					$(this).remove();
				});

				$ele = $('#alert_modal');
			}


			$ele.modal({backdrop:false,show:true});
		}

		function msgClose(){
			$ele = $('#alert_modal');
			$ele.modal('hide');

		}

		function appendToSpList(list){
			$tbody = $('.sp-list').find('tbody');
			$tbody.html("");
			list.forEach(function(val){
				$tbody.append('<tr><td><input class="sp-check" type="checkbox" value="'+val.id+'">'+val.id+'</td><td><img src="'+val.img_id+'"></td><td><span class="sp-name">'+val.name+'</span></td></tr>');
			});
			if(list.length==0){
				$tbody.html('<tr> <td colspan="3" align="center"><div class="empty-tr">没有找到任何符合的商品</div></td></tr>');
			}
			$('input.sp-check').change(function(e){
				var _checked = e.target.checked;
				var _pid = $(this).val();
				var _tr = $(this).parent().parent();
				var _img = _tr.find('img').attr('src');
				var _name = _tr.find('.sp-name').text();
				var _b = -1;
				for(var i=0; i<item_list.length; i++){
					if(item_list[i].pid == _pid){
						_b = i;
						break;
					}
				}
				if(_checked){
					if(_b==-1){
						item_list.push({pid:_pid, img:_img, name: _name});
					}
				}else{
					if(_b>-1){
						item_list.splice(_b,1);
					}
				}
			});
		}

		function queryProduct(cate_id,name,curpage){

			var data = {
				cate_id: cate_id,
				name:name,
				curpage: curpage ? curpage : 1
			};
			var url = "{:url('productPackage/queryProduct')}";

			$tbody = $('.sp-list').find('tbody').html('<tr> <td colspan="3" align="center"><div class="empty-tr">读取中...</div> </td></tr>');

			$.post(url, jQuery.param(data)).done(function(data){
				if(data.status){
					$('#sp_list').find("input[name='count']").val(data.info.count);
					appendToSpList(data.info.list);
				}else{
					msgAlert(data.info);
				}
			}).error(function(){
				msgAlert('请求失败');
			});
		}

		function addProduct(){
			var ele = $('#select_product');

			ele.on('show.bs.modal', function (e) {

				item_list = [];

				queryProduct();
			});

			ele.on('hidden.bs.modal', function (e) {


			});

			ele.modal({backdrop:false,show:true});
		}

		$('.add-sp').click(function(){
			addProduct();
		});

		function add_product(){
			//统计合并现有套餐商品
			item_list.forEach(function(val){
				$('#package_items tbody').append('<tr data-pid="'+val.pid+'" data-sku_id="0"> ' +
						'<td>'+val.pid+'</td> ' +
						'<td><img class="sp-img" src="'+val.img+'"></td> ' +
						'<td>'+val.name+'</td> ' +
						'<td> ' +
						'<a class="btn btn-primary btn-sm edit-item-sku" href="javascript:void(0);"><i class="fa fa-edit"></i>编辑</a><span class="sku-desc"> ' +
						'*包含全部规格*</span> ' +
						'</td> ' +
						'<td> ' +
						'<select class="form-control input-sm input-short"> ' +
						'<option value="0" selected="selected">否</option> ' +
						'<option value="1">是</option> ' +
						'</select> ' +
						'</td> ' +
						'<td> ' +
						'<a class="btn btn-danger btn-sm delete-item"><i class="fa fa-trash-o"></i>删除</a> ' +
						'</td> </tr>');
			});
			$('.delete-item').click(function(){
				$(this).parent().parent().remove();
			});
			$('.edit-item-sku').click(function(){
				editSku($(this).parent().parent());
			});
		}

		function jumpPage(type){
			var page = parseInt($("#sp_list").find("input[name='page']").val());
			var count = parseInt($("#sp_list").find("input[name='count']").val());

			if(type=='pre'){
				if(page-1>1){
					page = page-1;
				}else{
					msgAlert('没有上一页了');
					return;
				}
			}
			if(type=='next'){
				if(page*10<count){
					page = page+1;

				}else{
					msgAlert('没有下一页了');
					return;
				}
			}
			$("#sp_list").find("input[name='page']").val(page);
			queryProduct("","",page);
		}
		
		function appendToSkuList(sku,sku_id) {
			var $select = $('#sku_selector');
			$select.html('<option value="0">全部规格</option>');
			if(sku.length>1){
				sku.forEach(function(val){
					if(val.id == sku_id){
						$select.append('<option value="'+val.id+'" selected="selected">'+val.sku_desc+'</option>');
					}else{
						$select.append('<option value="'+val.id+'">'+val.sku_desc+'</option>');
					}

				});
			}
		}

		function querySku(pid,sku_id){
			var data = {
				pid: pid
			};
			var url = "{:url('productPackage/querySku')}";

			$('#sku_selector').html('<option value="0">读取中...</option>');

			$.post(url, jQuery.param(data)).done(function(data){
				if(data.status){
					appendToSkuList(data.info,sku_id);
				}else{
					msgAlert(data.info);
				}
			}).error(function(){
				msgAlert('请求失败');
			});
		}

		function editSku($ele){
			var ele = $('#select_sku');

			ele.on('show.bs.modal', function (e) {
				var _pid = $ele.attr('data-pid');
				var _sku_id = $ele.attr('data-sku_id');
				querySku(_pid,_sku_id);
			});

			ele.on('hidden.bs.modal', function (e) {

			});
			$('#select_sku_over').unbind().click(function(){

				var $sku_s  = $('#sku_selector');
				var _sku_id = $sku_s.val();
				$ele.attr('data-sku_id',_sku_id);
				var _sku_desc = _sku_id==0?'*包含全部规格*':$sku_s.find("option:selected").text();
				$ele.find('.sku-desc').text(' '+_sku_desc);
				ele.modal('hide');
			});

			ele.modal({backdrop:false,show:true});
		}

		$('.page-show .pre').click(function(){
			jumpPage('pre');
		});
		$('.page-show .next').click(function(){
			jumpPage('next');
		});

		$('#search_name').click(function(){
			var _name = $('input[name="product_name"]').val();
			_name = $.trim(_name);
			queryProduct("",_name,1);
		});
		$('.delete-item').click(function(){
			$(this).parent().parent().remove();
		});
		$('.edit-item-sku').click(function(){
			editSku($(this).parent().parent());
		});

		$('#add_product').click(function(){

			add_product();
			$('#select_product').modal('hide');
		});

		function savePackage(){
			//package_info
			var _img = $('.main_img .img-item').find('img').attr('data-imageid');
			var $name = $('#package_name');
			var $price = $('#package_price');
			var package_info = {
				package_id: $("input[name='package_id']").val(),
				package_img: _img ? _img : 0,
				package_name: $name.val(),
				end_time: $('#end_time').val(),
				package_price: $price.val(),
				package_desc: $('#package_desc').val(),
				dt_type: $('#package_type').val()
			};
			if($.trim(package_info.package_name)==''){
				alert('套餐名称不能为空');
				$name.focus();
				return false;
			}
			if(parseFloat(package_info.package_price)<0){
				alert('套餐价格必须大于0');
				$price.focus();
				return false;
			}
			//package_item
			var items = [];
			var items_hash = [];

			$('#package_items').find('tbody tr').each(function(){
				var _pid = $(this).attr('data-pid');
				var _sku_id = $(this).attr('data-sku_id');
				var _is_main = $(this).find('select').val();
				if(_pid in items_hash){
					if(_sku_id == 0)items_hash[_pid] = true;
				}else{
					items_hash[_pid] = _sku_id == 0;
				}
				items.push({pid:_pid, sku_id: _sku_id, is_main: _is_main});

			});
			//重排
			var items_hash2 = [];
			items = items.filter(function(val){
				var _pid = val.pid;
				if(val.sku_id==0){
					if(_pid in items_hash2){
						return false;
					}else{
						items_hash2[_pid] = true;
					}
				}
				return !(items_hash[_pid] && val.sku_id!=0);
			});
			package_info.items = items;

			var data = {
				package_info: package_info
			};
			var url = "{:url('productPackage/savePackage')}";

			$.post(url, jQuery.param(data)).done(function(data){
				if(data.status){
					msgAlert('保存成功!页面即将刷新~',true);
					setTimeout(function(){
						window.location.href = "{:config('SITE_URL')}/index.php/admin/productPackage/edit/id/" + data.info;
					},500);
				}else{
					msgAlert(data.info);
				}
			}).error(function(){
				msgAlert('请求失败');
			});

		}

		$('#save_package').click(function(){
			$(this).button("loading");
			savePackage();
			setTimeout(function(){
				$(this).button("reset");
			}.bind(this),500);
		});

	</script>
{/block}